<style include="print-preview-shared">
  :host {
    /* Width = 3 digits + space + cr-input-padding-end/start */
    --cr-input-width: calc(4em + 16px);
  }

  #sectionTitle {
    align-self: baseline;
  }

  cr-input {
    margin-inline-end: 16px;
    min-height: var(--print-preview-row-height);
    overflow: hidden;
  }

  .input-wrapper {
    align-items: center;
    display: flex;
  }

  :host([input-valid]) cr-input {
    --cr-input-error-display: none;
  }

  span[slot=suffix] {
    max-width: calc(100% - 5em);
    min-height: var(--print-preview-row-height);
    overflow: hidden;
    word-wrap: break-word;
  }
</style>
<print-preview-settings-section>
  <span slot="title" id="sectionTitle">[[inputLabel]]</span>
  <div slot="controls" id="controls">
    <span class="input-wrapper">
      <cr-input id="userValue" type="number"
          max="[[maxValue]]" min="[[minValue]]" data-timeout-delay="250"
          disabled$="[[getDisabled_(disabled)]]" on-keydown="onKeydown_"
          on-blur="onBlur_" aria-label="[[inputAriaLabel]]"
          error-message="[[errorMessage_]]" auto-validate>
        <span slot="suffix">
          <slot name="opt-inside-content"></slot>
        </span>
      </cr-input>
    </span>
  </div>
</print-preview-settings-section>
